import { init } from "snabbdom/build/package/init";
import { h } from "snabbdom/build/package/h";
import { classModule } from "snabbdom/build/package/modules/class";
import { propsModule } from "snabbdom/build/package/modules/props";
import { styleModule } from "snabbdom/build/package/modules/style";
import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners";
import { attributesModule } from "snabbdom/build/package/modules/attributes";
import avater from "./avater.png";

// 定义vnode
let vnode;

let sortType = "title";

let key = 5;
let sort = 5;
const margin = 8;

let totalHeight = 0;

// 数据源
let originData = [
  {
    key: "1",
    rank: 1,
    title: "泰坦尼克号",
    desc:
      "《泰坦尼克号》是美国二十世纪福斯电影公司、派拉蒙影业公司出品爱情片，由詹姆斯·卡梅隆执导.",
    elmHeight: 0
  },
  {
    key: "2",
    rank: 2,
    title: "阿凡达",
    desc: "《阿凡达》（Avatar）是一部由詹姆斯·卡梅隆执导，二十世纪福克斯出品",
    elmHeight: 0
  },
  {
    key: "3",
    rank: 3,
    title: "肖申克的救赎",
    desc: "《肖申克的救赎》（The Shawshank Redemption）是由弗兰克·达拉邦特执导",
    elmHeight: 0
  },
  {
    key: "4",
    rank: 4,
    title: "教父",
    desc: "《教父》是由弗朗西斯·福特·科波拉执导，",
    elmHeight: 0
  }
];

const patch = init([
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  attributesModule
]);

// 点击添加按钮的时候
function onAdd() {
  originData = [
    {
      key: key++,
      rank: sort++,
      title: "雾山五行",
      desc: "《雾山五行》是由六道无鱼动画工作室制作的原创网络动画片"
    }
  ].concat(originData);

  render();
  render();
}

// 点击排序按钮的时候
function changeSortType(value) {
  sortType = value;
  originData.sort((a, b) => {
    if (a[value] > b[value]) {
      return 1;
    }
    if (a[value] < b[value]) {
      return -1;
    }
    return 0;
  });
  render();
}
// 点击移除的时候
function remove(value) {
  originData = originData.filter(item => item.key !== value.key);
  render();
}

// 列表中的item
function moiveView(movie) {
  return h(
    "div.item",
    {
      key: movie.key,
      style: {
        opacity: "0",
        delayed: { transform: `translateY(${movie.offset}px)`, opacity: "1" },
        remove: {
          opacity: "0",
          transform: `translateY(${movie.offset}px) translateX(200px)`
        }
      },
      hook: {
        insert: vnode => {
          movie.elmHeight = vnode.elm.offsetHeight;
        }
      }
    },
    [
      //   h("div", { style: { fontWeight: "bold" } }, movie.rank),
      h("img.avater", {
        attrs: {
          src: avater
        }
      }),
      h("div.info", [h("div.title", movie.title), h("small.desc", movie.desc)]),
      h("div.rm-btn", { on: { click: [remove, movie] } }, "x")
    ]
  );
}

// 虚拟dom
function view(data) {
  return h("div.main", [
    h("h1", "电影排行"),
    h("div", [
      h("a.btn.add", { on: { click: onAdd } }, "添加"),
      h("small", "排序:"),
      h(
        "a.sort",
        {
          class: { active: sortType === "rank" },
          on: { click: [changeSortType, "rank"] }
        },
        "排名"
      ),
      h(
        "a.sort",
        {
          class: { active: sortType === "title" },
          on: { click: [changeSortType, "title"] }
        },
        "标题"
      ),
      h(
        "a.sort",
        {
          class: { active: sortType === "desc" },
          on: { click: [changeSortType, "desc"] }
        },
        "描述"
      )
    ]),
    h(
      "div.list",
      {
        style: { height: totalHeight + "px" }
      },
      data.map(moiveView)
    )
  ]);
}

// 渲染函数
function render() {
  originData = originData.reduce((acc, movie) => {
    const last = acc[acc.length - 1];
    movie.offset = last ? last.offset + last.elmHeight + margin : margin;
    // console.log(movie.offset)
    return acc.concat(movie);
  }, []);

  totalHeight =
    originData.length === 0
      ? 0
      : originData[originData.length - 1].offset +
        originData[originData.length - 1].elmHeight;

  console.log(totalHeight);
  vnode = patch(vnode, view(originData));
}

window.addEventListener("DOMContentLoaded", () => {
  let app = document.getElementById("app");
  vnode = patch(app, view(originData));
  render();
});
